// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use 'sass:math';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/includes/mixins/details';

// * -------------------------------------------------------------------------- */
// Index

main dt {
    @include text-title-xs;
    font-weight: bold;
    margin-top: $spacing-sm;
}

main dd {
    padding: $spacing-sm;
}

// * -------------------------------------------------------------------------- */
// Base Template

.reports-nav {
    margin: 0 auto;
    text-align: center;

    li {
        margin: $spacing-sm;

        a {
            display: block;
            min-width: math.div($content-md, 3);
        }

        @media #{$mq-md} {
            display: inline-block;
        }
    }
}

.prev-reports-nav {
    margin: 0 auto $layout-md;
    text-align: center;

    @media #{$mq-md} {
        width: $content-md;

        li {
            display: inline-block;
            position: relative;

            a {
                margin: $spacing-sm;
            }

            &:not(:last-child)::after {
                content: '•';
                position: absolute;
            }
        }
    }
}

// * -------------------------------------------------------------------------- */
// Report Template

.c-page-header {
    @include text-title-xs;
    background: $background-color-inverse;
    color: $body-text-color-inverse;

    h1 {
        color: $title-text-color-inverse;
    }

    span {
        @include text-title-xs;
        display: block;
        margin-top: $spacing-md;
    }

    @supports (--css: variables) {
        background: var(--background-color-inverse);
        color: var(--body-text-color-inverse);

        h1 {
            color: var(--title-text-color-inverse);
        }
    }
}

.mzp-c-article {
    margin: 0 auto $layout-lg;
}

main h2 {
    @include text-title-md;
    margin-top: $spacing-2xl;
}

main h3 {
    @include text-title-sm;
    margin-top: $spacing-2xl;
}

.footnotes {
    @include text-body-sm;
}

// * -------------------------------------------------------------------------- */
// Collapsible Sections

.c-collapsible-section button {
    @include summary;
    @include text-title-md;
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: bold;
    padding-right: 48px;
    text-align: inherit;
    width: 100%;
}

.c-collapsible-section button[aria-expanded='true']::before {
    @include summary-open;
}

.c-collapsible-section .is-closed[aria-hidden='true'] {
    display: none;
}

// * -------------------------------------------------------------------------- */
// Custom 2024 page
$mzp-v-spacing: var(--v-grid-md);

.c-2024-back-link {
    display: flex;
    gap: $spacing-xs;
    margin-bottom: $spacing-xl;

    @media #{$mq-md} {
        margin-bottom: $spacing-2xl;
    }

    img {
        padding: $spacing-xs;
        box-sizing: border-box;
    }
}

.c-2024-reports {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
    margin-top: $spacing-2xl;

    a {
        width: 100%;
    }

    @media #{$mq-md} {
        flex-flow: row wrap;

        > * {
            flex-shrink: 0;
        }

        a {
            width: auto;
        }
    }
}
